這次來介紹工具型別(Utility Types),工具型別是 TypeScript(TS)內建的型別工具,可以根據現有型別產生新的型別,不需要重新把整個型別定義一次。
這次會分成 2 天的形式來介紹工具型別,今天先談談這三個:
Partial<T>
Required<T>
Readonly<T>
Partial<T>Partial<T> 能夠將 <T> 內的所有屬性改為可選屬性,常在更新部分資料時使用。
interface Student {
name: string;
age: number;
major: string;
}
function studentUpdate(studentId: number, data: Partial<Student>) {
console.log(data);
}
// 使用 Partial<T> 後,原本的 Student 介面會變成全部都是可選屬性:
// interface Student {
// name?: string;
// age?: number;
// major?: string;
// }
// 能夠只提供部分的資訊,多個屬性也可以一起提供
studentUpdate(12345, { name: "Wendy" });
studentUpdate(67890, { age: 22, major: "資管系" });
因為所有屬性都變成可選,所以在更新資料時,可以只提供需要修改的部分,也可以同時提供多個屬性。
Required<T>Required<T> 和 Partial<T> 相反,前者會將屬性改為必須存在(必填),後者改為可選。
interface Student {
name?: string;
age?: number;
major?: string;
}
type StudentRequired = Required<Student>;
// StudentRequired 會變成這樣:
// {
// name: string;
// age: number;
// major: string;
// }
大家可能會想說,為什麼不一開始就將介面設定成必填屬性?還要這樣多此一舉,不是很奇怪嗎?
Required<T> 通常會用在原本允許部分屬性缺少,但經過處理後需要所有資料都存在的情況。
例如在程式中先補齊預設值,之後就可以使用 Required<T> 表示這份資料的所有屬性都已經存在,讓 TypeScript 在型別檢查時要求完整的資料。
Readonly<T>看到我們熟悉的 readonly,就知道這個型別是做什麼的。Readonly<T> 會把 <T> 裡面的屬性變成唯讀,之後不能重新賦值。
interface Student {
name: string;
age: number;
major: string;
}
const studentInfo: Readonly<Student> = {
name: "Ivan",
age: 24,
major: "音樂系"
};
// 唯讀狀態能夠正常讀取:
console.log(studentInfo.name);
console.log(studentInfo.age);
// 不能重新賦值:
studentInfo.major = "美術系"; // ❌ 不合法
如果希望建立後的物件屬性不再被重新賦值,就能夠使用 Readonly<T>。
需要注意的是,Readonly<T> 主要限制第一層屬性的重新賦值,並不代表物件內部所有巢狀屬性都會變成唯讀。
今天介紹了三個常見的工具型別,做個表格統整一下給大家參考:
| 工具型別 | 功能 | 原本狀態 | 更改後 |
|---|---|---|---|
Partial<T> |
全部屬性變成可選 | 必填 | 可選 |
Required<T> |
全部屬性變成必填 | 可選 | 必填 |
Readonly<T> |
全部屬性變成唯讀 | 可修改 | 不可重新賦值 |
今天的內容就到這邊,明天會接續這篇,繼續介紹工具型別喔!